﻿<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<String>" %>

 <style type="text/css">
       /* .t-editor .t-html
        {
            background-image: url('<%=
                Url.Content("~/Content/Editor/CustomTools/insert-html-icon.png") %>');
        }*/
        
        .html-view .t-button-wrapper
        {
            padding: .5em 0;
        }
        
        #htmlCancel
        {
            float: right;
        }
        
        .textarea
        {
            border-width: 1px;
            border-style: solid;
        }
        
        .textarea textarea
        {
             margin: 0;
             padding: 0;
             border: 0;
             font: normal 12px Consolas,Courier New,monospace;
             width: 100%;
             height: 300px;
        }
 </style>


<% //HttpUtility.HtmlDecode(Model)
    var propertyName = ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty);%>
 <% Html.Telerik().Editor()
           .Name(propertyName)
           .Encode(false)
           .HtmlAttributes(new {style = "height:400px;width:800px" })
           .Tools(tools => tools
               .Separator()
               .Snippets(snippets => snippets
                        .Add("Break", "<br />"))
               .Separator()
.Custom(settings => settings.HtmlAttributes(new { @class = "t-html", onclick = "viewRichHtmlEditorSource_" + propertyName + "(event)", title="Edit HTML" })))
           .FileBrowser(t => t.Browse("Browse", "ImageBrowser")
               .Thumbnail("Thumbnail", "ImageBrowser")
               .Upload("Upload", "ImageBrowser")
               .DeleteFile("DeleteFile", "ImageBrowser")
               .DeleteDirectory("DeleteDirectory", "ImageBrowser")
               .CreateDirectory("CreateDirectory", "ImageBrowser"))
                     .Value(Model).Render();
    %>

<script type="text/javascript">
    var htmlSourcePopup;
    
    function viewRichHtmlEditorSource_<%:propertyName%>(e) {
        var editorSelector = '<%:propertyName.Replace("[", "\\\\[").Replace("]", "\\\\]") %>';
        e = $.Event(e);
        e.stopPropagation();
        e.preventDefault();
        var editor = $('#' + editorSelector.replace('.', '_')).data('tEditor');        
        var html = editor.value();

        if (!htmlSourcePopup) 
        {
            htmlSourcePopup =
                $('<div class="html-view">' +
                        '<div class="textarea t-state-default"><textarea style="width: 100%; height: 300px;"></textarea></div>' +
                        '<div class="t-button-wrapper">' +
                            '<button id="htmlCancel" class="t-button" style="float: right;">Cancel</button>' +
                            '<button id="htmlUpdate" class="t-button">Update</button>' +
                        '</div>' +
                    '</div>')
                .css('display', 'none')
                .tWindow({
                    title: 'View Generated HTML',
                    modal: true,
                    resizable: false,
                    draggable: true,
                    width: 700,
                    onLoad: function () 
                    {
                        var $popup = $(this);
                        $popup.find('.textarea')
                                .css('width', function () {
                                    return 700 - (this.offsetWidth - $(this).width());
                                });
                    }})
                .data('tWindow');
        }

        var element = $(htmlSourcePopup.element);

        element.find('.textarea')
                .focus()
                .end()
                .find('#htmlCancel')
                .unbind('click')
                .click(function () {
                    htmlSourcePopup.close();
                })
                .end()
                .find('#htmlUpdate')
                .unbind('click')
                .click(function () {
                    var value = element.find('textarea').val();
                    editor.value(value);
                    editor.focus();
                    htmlSourcePopup.close();
                });

        element.find('textarea').val(html);
        htmlSourcePopup.center().open();
    }
</script>